<script setup>
import { onMounted, ref } from "vue";
import { getHomeMstSel } from "@/apis/mstsel/mstsel";
const mstselData = ref([]);
const getHomeMstSelData = async () => {
  const res = await getHomeMstSel();
  mstselData.value = res.data;
};

onMounted(() => {
  getHomeMstSelData();
});
</script>
<template>
  <section class="banner banner--style2 bg" id="home">
    <div class="container">
      <div class="banner__wrapper">
        <div class="row g-5 justify-content-center">
          <div class="col-lg-10">
            <div class="banner__content text-center" data-aos-duration="900">
              <h1>
                籍祥面试题库 <br />
                面试题库 & 代码实现
              </h1>
              <p>针对于面试方向的题库 & 各种功能模块的实现  </p>
              <a href="project.html" class="default-btn"
                ><span>Explore IGOs</span></a
              >
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <div class="counter__section counter__section--uplift">
    <div class="container">
      <div class="counter__wrapper" data-aos-duration="1000">
        <div class="row g-5 justify-content-center align-items-center">
          <div class="col-lg-3 col-sm-6">
            <div class="counter__item">
              <h3>
                $<span
                  data-purecounter-start="0"
                  data-purecounter-end="565"
                  class="purecounter"
                  >565</span
                >M
              </h3>
              <p>面试题数量</p>
            </div>
          </div>
          <div class="col-lg-3 col-sm-6">
            <div class="counter__item">
              <h3>
                <span
                  data-purecounter-start="0"
                  data-purecounter-end="120"
                  class="purecounter"
                  >120</span
                >M+
              </h3>
              <p>功能模块</p>
            </div>
          </div>
          <div class="col-lg-3 col-sm-6">
            <div class="counter__item">
              <h3>
                <span
                  data-purecounter-start="0"
                  data-purecounter-end="999"
                  class="purecounter"
                  >999</span
                >+
              </h3>
              <p>注册人数</p>
            </div>
          </div>
          <div class="col-lg-3 col-sm-6">
            <div class="counter__item">
              <h3>
                <span
                  data-purecounter-start="0"
                  data-purecounter-end="65"
                  class="purecounter"
                  >65</span
                >M
              </h3>
              <p>点赞数量</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <section class="project padding-top padding-bottom">
    <div class="container">
      <div class="section-header section-header--middle">
        <div class="section-header__content">
          <div class="section-header__titlebar">
            <p class="section-header__subtitle">面试题库</p>
            <h2 class="section__header__title">面试题分类</h2>
          </div>
        </div>
      </div>
      <div class="project__wrapper">
        <div class="row g-4">
          <div
            class="col-lg-4 col-sm-6"
            v-for="item in mstselData"
            :key="item.id"
          >
            <div class="project__item">
              <div class="project__item-inner">
                <div class="project__item-thumb">
                  <img class="mstsel" :src="item.mstSelImg" alt="IGO cover" />
                  <span class="badge"
                    ><img
                      src="../../assets/images/chain/solana.png"
                      alt="chain logo"
                  /></span>
                </div>
                <div class="project__item-content">
                  <div class="project__item-top">
                    <div class="project__item-author">
                      <a href="#"
                        ><img :src="item.mstSelIcon" alt="author image"
                      /></a>
                      <h4>{{ item.mstSelName }}</h4>
                    </div>
                  </div>
                  <div class="project__item-middle">
                    <ul class="project__infolist">
                      <li class="project__infolist-item">
                        <p class="project__infolist-name">题库名:</p>
                        <p class="project__infolist-data">
                          {{ item.mstSelName }}
                        </p>
                      </li>
                      <li class="project__infolist-item">
                        <p class="project__infolist-name">题库介绍:</p>
                        <p class="project__infolist-data">
                          {{ item.mstSelDes }}
                        </p>
                      </li>
                      <li class="project__infolist-item">
                        <p class="project__infolist-name">题库数量:</p>
                        <p class="project__infolist-data">{{ item.count }}</p>
                      </li>
                    </ul>
                    <div class="project__item-amount">
                      <p>点击量</p>
                      <h6>
                        <span class="color--theme-color">{{ item.hits }}</span>
                        /
                        <span>1000 点击量</span>
                      </h6>
                      <div class="progress">
                        <div
                          class="progress-bar"
                          role="progressbar"
                          :style="{ width: `${item.hits / 10}%` }"
                          aria-valuenow="25"
                          aria-valuemin="0"
                          aria-valuemax="100"
                        ></div>
                      </div>
                    </div>
                  </div>
                  <div class="project__item-bottom">
                    <!-- <a
                      href="project-details.html"
                      class="default-btn default-btn--small"
                      >查看</a
                    > --> 
                    <RouterLink :to="`/mstsel?id=${item.id}`" class="default-btn default-btn--small">
                      查看
                    </RouterLink>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="text-center mt-5">
          <a href="project.html" class="default-btn"><span>显示更多</span></a>
        </div>
      </div>
    </div>
  </section>

  <section class="project padding-bottom project--completed2">
    <div class="container">
      <div class="section-header section-header--middle">
        <div class="section-header__content">
          <div class="section-header__titlebar">
            <p class="section-header__subtitle">功能代码</p>
            <h2 class="section__header__title">代码实现</h2>
          </div>
        </div>
      </div>
      <div class="project__wrapper">
        <div class="row g-4">
          <div class="col-12" v-for="index in 5" :key="index">
            <div
              class="project__item2 position-relative aos-init"
              data-aos-duration="800"
            >
              <div class="project__item2-inner">
                <div class="project__item2-name">
                  <div class="project__item2-content">
                    <h4>
                      <a href="project-details.html" class="stretched-link"
                        >docker</a
                      >
                    </h4>
                    <p>docker安装mysql步骤</p>
                  </div>
                </div>

                <div class="project__item2-chain">
                  <img
                    src="../../assets/images/chain/binance.png"
                    alt="chain icon"
                  />
                </div>

                <div class="project__item2-time">
                  <p>作者:籍祥</p>
                </div>

                <div class="project__item-amount">
                  <p>点击数</p>
                  <h6>
                    <span class="color--theme-color">10000</span> /
                    <span>15000</span>
                  </h6>
                  <div class="progress">
                    <div
                      class="progress-bar"
                      role="progressbar"
                      style="width: 25%"
                      aria-valuenow="25"
                      aria-valuemin="0"
                      aria-valuemax="100"
                    ></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="text-center mt-5 aos-init" data-aos-duration="800">
          <a href="project.html" class="default-btn"><span>View More</span></a>
        </div>
      </div>
    </div>
  </section>

  <section class="benifit padding-top padding-bottom bg--primary-color">
    <div class="container">
      <div class="section-header section-header--middle">
        <div class="section-header__content">
          <div class="section-header__titlebar">
            <p class="section-header__subtitle">Benifits</p>
            <h2 class="section__header__title">What We Offer</h2>
          </div>
        </div>
      </div>
      <div class="benifit__wrapper">
        <div class="row g-5">
          <div class="col-lg-3 col-sm-6">
            <div class="benifit__item">
              <div class="benifit__item-inner">
                <div class="benifit__item-thumb">
                  <img
                    src="../../assets/images/benifit/01.png"
                    alt="Benifit image"
                  />
                </div>
                <div class="benifit__item-content">
                  <h4>Cross Chain</h4>
                  <p>
                    Lorem ipsum dolor, sit amet consec tetur adipisicing elit.
                    Provident eius eaque aspernatur amet
                  </p>
                </div>
              </div>
            </div>
          </div>
          <div class="col-lg-3 col-sm-6">
            <div class="benifit__item">
              <div class="benifit__item-inner">
                <div class="benifit__item-thumb">
                  <img
                    src="../../assets/images/benifit/02.png"
                    alt="Benifit image"
                  />
                </div>
                <div class="benifit__item-content">
                  <h4>Stack Pad</h4>
                  <p>
                    Lorem ipsum dolor, sit amet consec tetur adipisicing elit.
                    Provident eius eaque aspernatur amet
                  </p>
                </div>
              </div>
            </div>
          </div>
          <div class="col-lg-3 col-sm-6">
            <div class="benifit__item">
              <div class="benifit__item-inner">
                <div class="benifit__item-thumb">
                  <img
                    src="../../assets/images/benifit/03.png"
                    alt="Benifit image"
                  />
                </div>
                <div class="benifit__item-content">
                  <h4>Multi Layer</h4>
                  <p>
                    Lorem ipsum dolor, sit amet consec tetur adipisicing elit.
                    Provident eius eaque aspernatur amet
                  </p>
                </div>
              </div>
            </div>
          </div>
          <div class="col-lg-3 col-sm-6">
            <div class="benifit__item">
              <div class="benifit__item-inner">
                <div class="benifit__item-thumb">
                  <img
                    src="../../assets/images/benifit/04.png"
                    alt="Benifit image"
                  />
                </div>
                <div class="benifit__item-content">
                  <h4>Elite Projects</h4>
                  <p>
                    Lorem ipsum dolor, sit amet consec tetur adipisicing elit.
                    Provident eius eaque aspernatur amet
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>
<style lang="scss" scoped>
.bg {
  background-image: url("../../assets/images/banner/bg.jpg");
}
.mstsel {
  width: 450px;
  height: 300px;
}
</style>